<template>
  <div class="barchart" :style="styleObj" ref="barchart"></div>
</template>

<script>
import * as echarts from 'echarts';
import { onMounted, ref } from "vue";
export default {
  name: "BarChart",
  props:{
    xlabel:{
      type: Array
    },
    data:{
      type: Array
    },
    height:{
      type: String,
      default: '600px'
    },
    width:{
      type: String,
      default: '100%'
    }
  },
  setup(props) {
    const barchart = ref(null);
    const {xlabel,data,height,width} = props

    const styleObj = {
      height: height,
      width: width
    }

    const option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: xlabel,
          axisTick: {
            alignWithLabel: true,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "直接访问",
          type: "bar",
          barWidth: "60%",
          data: data,
        },
      ],
    };

    onMounted(()=>{
        const chart = echarts.init(barchart.value);
        chart.setOption(option)
         window.addEventListener('resize', function () { 
            chart.resize()
        })
    })

    return { barchart,styleObj };
  },
};
</script>

<style>
</style>